<template>
  <div :class="{ 'bi-container': true }">
    <template v-if="inshow">
      <div id="Mycontainer" style="width:100%;height:100%"></div>
    </template>
    <div id="home-operation-layer">
      <div class="top_date" align="center">
        <img src="../../assets/images/u16.png" width="24px" height="24px" style="vertical-align: sub;">
        {{ $parent.realTime }}
      </div>
      <div class="operation-wrap">
        <div class="title animate__animated animate__flipInX" align="center">红星湖数据监管平台智慧监控大屏</div>
        <div class="btn-wrap">
          <div class="btn-box">
            <img src="../../assets/images/u19.png" @click="handleLoadMap" width="113px">
            <!-- <div>
              <el-button class="btn" size="mini" icon="el-icon-check" circle @click="handleLoadMap" />
            </div>
            <div class="text">
              加载地图
            </div> -->
          </div>
          <div :class="!(visible.leftBox || visible.rightBox) ? 'btn-box show_hideen' : 'btn-box'">
            <img src="../../assets/images/u20.png"
              @click="visible.leftBox = visible.rightBox = !(visible.leftBox || visible.rightBox)" width="113px">
            <!-- <div>
              <el-button class="btn" size="mini" icon="el-icon-menu" circle
                @click="visible.leftBox = visible.rightBox = !(visible.leftBox || visible.rightBox)" />
            </div>
            <div class="text">
              全部浮框
            </div> -->
          </div>
          <div :class="!visible.leftBox ? 'btn-box show_hideen' : 'btn-box'">
            <img src="../../assets/images/u21.png" @click="visible.leftBox = !visible.leftBox" width="113px">
            <!-- <div>
              <el-button class="btn" size="mini" icon="el-icon-s-platform" circle
                @click="visible.leftBox = !visible.leftBox" />
            </div>
            <div class="text">
              左侧浮框
            </div> -->
          </div>
          <div :class="!visible.rightBox ? 'btn-box show_hideen' : 'btn-box'">
            <img src="../../assets/images/u22.png" @click="visible.rightBox = !visible.rightBox" width="113px">
            <!-- <div>
              <el-button class="btn" size="mini" icon="el-icon-s-data" circle
                @click="visible.rightBox = !visible.rightBox" />
            </div>
            <div class="text">
              右侧浮框
            </div> -->
          </div>
          <!-- <div class="btn-box">
            <div>
              <el-button class="btn" size="mini" icon="el-icon-minus" circle @click="handleCloseBi" />
            </div>
            <div class="text">
              关闭大屏
            </div>
          </div> -->
        </div>
        <div class="top_close" align="center" @click="handleCloseBi">
          <img src="../../assets/images/u23.png" width="24px" height="24px" style="vertical-align: sub;">
          <span>关闭大屏</span>
        </div>
      </div>
      <div class="b_div">
        <div class="b_div_yh" v-for="(v, i) in $parent.monitorDeviceDataList" :key="i">
          <div :class="v.status > 0 ? 'b_hleft b_left' : 'b_left'" align="center">
            <img :src="require(`../../assets/images/${v.status > 0 ? 'u27' : 'u28'}.png`)" width="25px" height="25px"
              style="float:left">
            <img :src="require(`../../assets/images/${v.status > 0 ? 'u30' : 'u29'}.png`)" width="10px" height="12px">
            <span>{{ v.monitorName || '-' }}</span>
          </div>
          <div :class="v.status > 0 ? 'b_hright b_right' : 'b_right'" align="center">
            <span>{{ v.data || '-' }} </span>
            <span> {{ v.unit || 'mg/L' }}</span>
          </div>
        </div>
      </div>
      <div class="r_fby" v-for="(v, i) in ListArr" :key="i">
        <div :class="v.offlineNumber > 0 ? 'r_tit r_tit_er' : 'r_tit'"><span>{{ v.boxName || '-' }}</span></div>
        <div :class="v.offlineNumber > 0 ? 'r_neione_er r_neione' : 'r_neione'">
          <el-row :gutter="10" style="pointer-events:none">
            <el-col :span="8">
              <img :src="require(`../../assets/images/${v.offlineNumber > 0 ? 'u33' : 'u32'}.png`)" width="100%"
                height="100%">
            </el-col>
            <el-col :span="16">
              <div class="r_man">
                <ul class="r_ulli">
                  <li><span>今日运行:</span> <span>{{ v.runningHour || 0 }}</span> <span>台</span></li>
                  <li><span>今日电量:</span> <span>{{ v.powerConsumption || '0.00' }}</span> <span>度</span></li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <el-row style="margin-top:15px">
            <el-col :span="24">
              <span>控制设备：</span>
              <div :class="v.showqie ? 'r_oneemttwo' : 'r_oneemt'">{{ v.deviceNames && v.deviceNames.join(' | ') }}
              </div>
              <img :src="require(`../../assets/images/${v.offlineNumber > 0 ? 'u31' : 'u11'}.png`)"
                :class="v.showqie ? 'r_show r_show_sa' : 'r_show r_show_hui'" @click="() => v.showqie = !v.showqie"
                width="14px">
            </el-col>
            <el-col :span="24">
              <ul class="g_ul">
                <li><span>设备总数:</span> <span class="zi">{{ v.totalNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
                <li><span>运行设备:</span> <span class="zi">{{ v.runningNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
                <li><span>停运设备:</span> <span class="zi">{{ v.offlineNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
      <left-box v-show="visible.leftBox" />
      <right-box v-show="visible.rightBox" />
      <div class="wrap right-wrap">abc</div>
    </div>
  </div>
</template>

<script>
import LeftBox from './left-box'
import RightBox from './right-box'
import Lv from '@/assets/images/u1442.png'
import Lan from '@/assets/images/u1440.png'
import Zi from '@/assets/images/u1468.png'
import UZ from '@/assets/images/u26.png'
import Hong from '@/assets/images/u1439.png'

import AMapLoader from '@amap/amap-jsapi-loader';
//安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '249c8810513321911bf1b25c975e075b',
}
export default {
  data () {
    return {
      visible: {
        leftBox: true,
        rightBox: true
      },
      Lv: Lv,
      Lan: Lan,
      Zi: Zi,
      UZ: UZ,
      Hong: Hong,
      ListArr: [],
      inshow: true,
      form: {
        longitude: 114.031514,
        latitude: 22.534035
      }
    }
  },
  components: {
    LeftBox,
    RightBox
  },
  mounted () {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  destroyed () {
    this.map && this.map.destroy()
  },
  methods: {
    initMap () {
      this.ListArr = this.$parent.electricityBox.map((item) => {
        return {
          ...item,
          showqie: false
        }
      })
      const th = this
      this.inshow = true
      AMapLoader.load({
        key: "d3c2d6765613d9728729a9c9afe9b78b",    // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", "AMap.PlaceSearch", "AMap.ControlBar", "AMap.MouseTool"],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("Mycontainer", {  //设置地图容器id
          viewMode: "2D",    //是否为3D地图模式
          zoom: 17,           //初始化地图级别
          center: [114.031514, 22.534035], //初始化地图中心点位置
          resizeEnable: true
        });
        this.map.setMapStyle('amap://styles/dark')

        th.$parent.electricityBox.forEach((item, index) => {//电箱
          // 创建 AMap.Icon 实例：
          var icon = new AMap.Icon({
            size: item.offlineNumber > 0 ? new AMap.Size(32, 37) : new AMap.Size(26, 30),    // 图标尺寸
            image: item.offlineNumber > 0 ? th.Hong : th.Zi,  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -20),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: item.offlineNumber > 0 ? new AMap.Size(32, 37) : new AMap.Size(26, 30)   // 根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),
            title: item.boxName,
            offset: new AMap.Pixel(-13, -40),
            icon: icon,
          });
          if (item.offlineNumber > '0') {
            marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          }
          let arr = item.deviceNames.join(',')
          // 信息窗体的内容
          let dom = document.querySelectorAll(".r_fby");
          var content = dom[index]
          //   `<div style='padding:10px 10px 20px;color: #fff;border-radius:5px;background-color:${item.offlineNumber > 0 ? 'rgb(216, 30, 6, 0.7)' : 'rgb(130, 82, 157, 0.7)'};height:215px;width:600px '>` +
          //   "<div style='display:flex;font-size:12px'>" +
          //   `<div style='flex:2' align='center'>${item.boxName} <div><img src='${item.boxImg}' style='margin-top:10px;width:80%;height:80%'/></div></div>` +
          //   "<div style='flex:3;border-left:1px #fff solid;height:190px;padding-left:10px'><div align='center'>电箱控制明细</div>" +
          //   "<div style='margin-top:25px'><span style='position: relative;top:-10px'>控制设备:</span><div style='background-color:#50048c;border-radius:5px;padding:5px;display:inline-block;height-min:50px;width:70%;line-height:20px'>" +
          //   `${arr}</div></div>` +
          //   `<div style='display:flex;width:100%;margin-top:25px' align='center'><div style='flex:1'><div style='margin:0px 5px;background-color:#50048c;border-radius:5px;padding:5px;color:#caf982'><b>${item.totalNumber}</b></div><div>(台)</div><div>设备总数</div></div>` +
          //   `<div style='flex:1'><div style='flex:1'><div style='background-color:#50048c;border-radius:5px;padding:5px;color:#caf982;margin:0px 5px;'><b>${item.runningNumber}</b></div><div>(台)</div><div>运行设备数</div></div></div><div style='flex:1'>` +
          //   `<div style='flex:1'><div style='margin:0px 5px;background-color:${item.offlineNumber > 0 ? '#fff' : '#50048c'};border-radius:5px;padding:5px;color:${item.offlineNumber > 0 ? 'red' : '#caf982'}'><b>${item.offlineNumber}</b></div><div>(台)</div><div>停运设备数</div></div></div></div></div>` +
          //   "<div style='flex:3;border-left:1px #fff solid;height:190px;padding-left:10px'><div align='center'>运行数据</div>" +
          //   `<div style='margin-top:30px'> 今日运行时长:<div style='font-size:14px;display:inline-block;background-color:#50048c;border-radius:5px;padding:10px 30px;color:#caf982;margin:0px 5px;'><b>${item.runningHour}</b></div>小时</div><div style='margin-top:30px'>今日使用电量:<div style='display:inline-block;background-color:#50048c;border-radius:5px;padding:10px 40px;color:#caf982;margin:0px 5px;font-size:14px'><b>${item.powerConsumption || 0}</b></div>度</div></div></div>` +
          //   `</div>` +
          //   "</div>"
          // "</div>";
          // 创建 infoWindow 实例	
          var infoWindow = new AMap.InfoWindow({
            content: content,  //传入 dom 对象，或者 html 字符串
            offset: new AMap.Pixel(0, -40),
            isCustom: true,  //使用自定义窗体
          });
          let text = `<div style='font-weight:700;background-color:${item.offlineNumber > 0 ? 'rgba(141, 0, 0, 0.5)' : 'rgba(7, 78, 94, 0.5)'};padding:2px 15px;border-radius:3px;
border: 1px solid ${item.offlineNumber > 0 ? '#AB0101' : '#009299'};'><span style='background: ${item.offlineNumber > 0 ? 'linear-gradient(0deg, #FF722C 0%, #FBD318 84.5458984375%);' : 'linear-gradient(0deg, #2CFF99 0%, #18FBF2 84.9365234375%);'}
-webkit-background-clip: text;-webkit-text-fill-color: transparent;'>${item.boxName}</span></div>`
          // 创建 infoWindow 实例	
          var infotext = new AMap.InfoWindow({
            content: text,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          marker.on('click', function (e) {//标记的点击
            infoWindow.open(th.map, marker.getPosition());
            th.map.panTo(marker.getPosition());
          });
          marker.on('mouseover', function (e) {//标记鼠标悬浮
            infotext.open(th.map, [item.longitude, item.latitude]);
          });
          marker.on('mouseout', function (e) {//标记鼠标离开
            infotext.close();
          });
          this.map.addControl(new AMap.Scale());

          this.map.add(marker)

        });
        th.$parent.monitorDeviceDataList.forEach((item, index) => {//DO监测仪
          var icon = new AMap.Icon({
            size: item.status > 0 ? new AMap.Size(42, 47) : new AMap.Size(26, 30),    // 图标尺寸
            image: [th.Lan, th.UZ, th.UZ][item.status],  // Icon的图像
            // imageOffset: new AMap.Pixel(0, -60),  // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: item.status > 0 ? new AMap.Size(42, 47) : new AMap.Size(26, 30),    // 根据所设置的大小拉伸或压缩图片
          });
          var marker = new AMap.Marker({
            position: new AMap.LngLat(item.longitude, item.latitude),
            title: item.monitorName,
            offset: new AMap.Pixel(-13, -40),
            icon: icon,
          });
          if (item.status != '0') {
            // marker.setMap(th.map);
            marker.setAnimation('AMAP_ANIMATION_BOUNCE');
          }

          let text = `<div style='font-weight: 700;border-radius:3px;background-color:${['rgba(0, 96, 14, 0.5)', 'rgba(105, 64, 0, 0.5)', 'rgba(105, 64, 0, 0.5)'][item.status]};border: 1px solid ${['#00990B', '#995300', '#995300'][item.status]};color:${['#5FD500', '#DD880F', '#DD880F'][item.status]};padding:2px 15px;'>${item.monitorName}</div>`
          // 创建 infoWindow 实例	
          var infoWindow = new AMap.InfoWindow({
            content: text,  //传入 dom 对象，或者 html 字符串
            isCustom: true,  //使用自定义窗体
            anchor: 'top-center',
          });
          marker.on('click', function (e) {//标记的点击
            th.map.panTo(marker.getPosition());
          });
          marker.on('mouseover', function (e) {//标记鼠标悬浮
            infoWindow.open(th.map, [item.longitude, item.latitude]);
          });
          marker.on('mouseout', function (e) {//标记鼠标离开
            infoWindow.close();
          });
          this.map.addControl(new AMap.Scale());

          this.map.add(marker)

        });

        th.$parent.lakeDevice.forEach((item, index) => {//设备
          if (item.status == '1') {//只展示上线设备
            var icon = new AMap.Icon({
              size: new AMap.Size(26, 30),    // 图标尺寸
              image: th.Lv,  // Icon的图像
              imageSize: new AMap.Size(26, 30)   // 根据所设置的大小拉伸或压缩图片
            });
            var marker = new AMap.Marker({
              position: new AMap.LngLat(item.longitude, item.latitude),
              title: item.deviceName,
              offset: new AMap.Pixel(-13, -40),
              icon: icon,
            });
            let text = `<div style='background-color:rgba(0, 60, 128, 0.5);border-radius:3px;border: 1px solid #005EC7;font-weight:700;padding:2px 15px;'><span style='background: linear-gradient(0deg, #0061CE 0%, #449CFF 84.9365234375%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;'>${item.deviceName}</div>`
            // 创建 infoWindow 实例	
            var infoWindow = new AMap.InfoWindow({
              content: text,  //传入 dom 对象，或者 html 字符串
              isCustom: true,  //使用自定义窗体
              anchor: 'top-center',
            });
            marker.on('click', function (e) {//标记的点击
              th.map.panTo(marker.getPosition());
            });
            marker.on('mouseover', function (e) {//标记鼠标悬浮
              infoWindow.open(th.map, [item.longitude, item.latitude]);
            });
            marker.on('mouseout', function (e) {//标记鼠标离开
              infoWindow.close();
            });
            this.map.addControl(new AMap.Scale());
            this.map.add(marker)
          }
          this.map.setFitView();//自适应所有图标
        });
      }).catch(e => {
        this.inshow = true
        console.log(e);
      })
    },
    handleCloseBi () {
      this.$emit('clear')
    },
    handleLoadMap () {
      this.inshow = false
      this.clearTime = setTimeout(() => {
        this.initMap()
      }, 500);
    },
    handleDestroyMap () {
      this.$emit('clear')
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  overflow: hidden !important;
  font-size: 13px;

}

.b_gyd {
  width: 300px;
  height: 100px;
  background-color: #00E2F6;
}

.show_hideen {
  opacity: 0.5;
}

.b_div {
  position: fixed;
  bottom: 10px;
  left: 26vw;
  width: 47vw;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;


  .b_div_yh {
    margin-bottom: 10px;

    .b_hleft {
      background-color: rgba($color: #5D3500, $alpha: 0.5) !important;

      span {
        color: #DD880F !important;
      }
    }

    .b_hright {
      background-color: rgba($color: #906031, $alpha: 0.5) !important;

      span:nth-child(2) {
        color: #DD880F !important;
      }
    }

    .b_left {
      float: left;
      background-color: rgba($color: #075D00, $alpha: 0.5);
      width: 165px;
      line-height: 25px;
      height: 26px;

      span {
        margin-left: 6px;
        font-size: 14px;
        font-weight: 400;
        color: #5FD500;
      }
    }
  }

  .b_right {
    margin-left: 5px;
    float: left;
    background-color: rgba($color: #4C9031, $alpha: 0.5);
    width: 114px;
    line-height: 25px;
    height: 26px;

    span:nth-child(1) {
      font-size: 18px;
      font-weight: 400;
      color: #FEFEFE;
    }

    span:nth-child(2) {
      font-size: 12px;
      font-weight: 400;
      color: #5FD500;
    }
  }
}

.background_box {
  color: #fff;
  border-radius: 5px;
  background-color: rgb(0, 0, 0, 0.5);
}

.bi-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #1a1a1a;

  // color: white;
}

#home-operation-layer {
  .top_date {
    position: fixed;
    top: 5px;
    left: 0;
    background: url('../../assets/images/u17.png') no-repeat;
    background-size: contain;
    width: 18vw;
    height: 50px;
    font-size: calc(100vw * 18/ 1920);
    font-weight: bold;
    color: #67DAEE;
    line-height: 50px;
  }

  .top_close {
    cursor: pointer;
    position: fixed;
    top: 5px;
    right: 0;
    background: url('../../assets/images/u24.png') no-repeat;
    background-size: contain;
    width: 18vw;
    height: 50px;
    font-size: calc(100vw * 18/ 1920);
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 1px 3px #67daee;
    line-height: 50px;
  }

  .operation-wrap {
    position: fixed;
    top: 5px;
    left: 20vw;
    background: url('../../assets/images/u18.png') no-repeat;
    background-size: contain;
    width: 60vw;

    .title {
      padding: 15px 30px;
      font-size: calc(100vw * 25/ 1920);
      font-weight: bold;
      background: linear-gradient(0deg, #00E2F6 0%, #FFFFFF 85.3271484375%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      // background-color: #00bb00;
      color: white;
      border-radius: 5px;
      margin-bottom: 10px;
      // box-shadow: #ccc 2px 2px 10px;
    }

    .btn-wrap {
      text-align: center;
      display: flex;
      justify-content: center;

      .btn-box {
        cursor: pointer;
        margin: 10px 10px 0px 10px;
      }
    }
  }


}
</style>
<style lang="scss">
.r_fby {
  // margin: 10px 0px 10px 0px;
  // background: url('../../../assets/images/u10.png') round;
  // background-size: cover;
  width: 400px;
  // height: 15vh;
  // clear: both;

  @mixin urlti($urls, $true) {
    background: url("../../assets/images/y" +$urls+".png") no-repeat $true;
    background-size: cover $true;
  }

  .r_tit_er {
    // @include urlti(7, !important);
    background: url("../../assets/images/y7.png")-2px 0px no-repeat !important;
    background-size: contain !important;
    border: none !important;
    width: 402px;
    height: 28px !important;
    line-height: 28px !important;

    >span {
      background: linear-gradient(0deg, #FF722C 0%, #FBD318 84.9365234375%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
  }


  .r_neione_er {
    @include urlti(8, !important);
    border-image: linear-gradient(0deg, #AD0000, #891313) 1 1 !important;

    span:nth-child(1) {
      color: #fff !important;
    }

    .r_oneemt {
      color: #FFAE00 !important;
    }

    .r_oneemttwo {
      color: #FFAE00 !important;
    }

    .g_ul>li {
      background: url('../../assets/images/u14.png')30px 0px no-repeat !important;
      background-size: contain !important;

      .zi {
        color: #FFAE00 !important;
      }
    }

    .r_man {
      background: url('../../assets/images/u25.png') round !important;
      background-size: cover !important;
    }

    .r_ulli>li {
      span:nth-child(2) {
        color: #FFAE00 !important;
      }
    }

  }

  .r_tit {
    // @include urlti(1, null);
    background-color: rgba($color: #074E5E, $alpha: 0.5);
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    border: 1px solid;
    border-image: linear-gradient(0deg, #2D6A77, #4FB2C0) 1 1;
    border-bottom: none;

    >span {
      font-size: calc(100vw * 18/ 1920);
      font-weight: bold;
      color: #FFFFFF;
      background: linear-gradient(0deg, #2CFF99 0%, #18FBF2 84.9365234375%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .r_neione {
    padding: 5px 6px 0px;
    border: 1px solid;
    border-image: linear-gradient(0deg, #4FB2C0, #2D6A77) 1 1;
    border-top: none;
    width: 100%;
    @include urlti(2, null);

    span:nth-child(1) {
      font-size: calc(100vw * 14/ 1920);
      font-weight: 400;
      color: #59B9C5;
      float: left;
    }

    .r_show {
      cursor: pointer;
      float: right;
      margin-top: 5px;
    }

    .r_show_sa {
      transform: rotate(-180deg);
      transition: transform 0.5s ease;
    }

    .r_show_hui {
      transform: rotate(-360deg);
      transition: transform 0.5s ease;
    }

    .r_oneemt {
      width: 75%;
      font-size: calc(100vw * 16/ 1920);
      font-weight: 400;
      color: #00F4FF;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-all; //数字和文字/字母不分行
      float: left;
    }

    .r_oneemttwo {
      width: 75%;
      font-size: calc(100vw * 16/ 1920);
      font-weight: 400;
      color: #00F4FF;
      display: inline-block;
    }

    .g_ul {
      list-style-type: none;
      padding: 0px;
      font-size: calc(100vw * 14/ 1920);
      font-weight: 400;
      color: #59B9C5;
      display: flex;
      justify-content: space-evenly;

      li {
        padding: 0px;
        line-height: 20px;
        margin: 5px 0px 10px 0;
        min-width: 110px;

        .t_tai {
          font-size: calc(100vw * 13/ 1920);
          color: #fff;
        }
      }

      li:nth-child(1) {
        background: url('../../assets/images/u13.png')30px 0px no-repeat;
        background-size: contain;

        .zi {
          color: #00F0FF;
          font-size: calc(100vw * 20/ 1920);
        }
      }

      li:nth-child(2) {
        background: url('../../assets/images/u12.png')30px 0px no-repeat;
        background-size: contain;

        .zi {
          color: #00FF78;
          font-size: calc(100vw * 20/ 1920);
        }
      }

      li:nth-child(3) {
        background: url('../../assets/images/u14.png')30px 0px no-repeat;
        background-size: contain;

        .zi {
          color: #FF9300;
          font-size: calc(100vw * 20/ 1920);
        }
      }
    }

    .r_man {
      margin: 5px -7px 15px 10px;
      background: url('../../assets/images/u15.png') round;
      background-size: cover;
      height: 75px;
      padding: 10px 0px 10px 32%;

      .r_ulli {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
          margin: 0px 0px 5px 0px;
          font-size: calc(100vw * 18/ 1920);
          font-weight: 400;
          line-height: 25px;
          color: #59B9C5;

          span:nth-child(2) {
            color: #00F0FF;
            font-size: calc(100vw * 27/ 1920);
          }

          span:nth-child(3) {
            color: #fff;
            font-size: calc(100vw * 16/ 1920);
          }
        }
      }
    }
  }
}
</style>